<template>
  <div>
    <div class="Cseach-container"><input class="Cseach-input" type="text" placeholder="请输入城市名" v-model="keyword"></div>
    <div class="Cseach-logic" ref="nba" v-show="keyword">
      <div>
        <div  v-for="item of list" :key="item.id" class="Cseach-logic-f border-bottom" @click='handClick(item.name)'>{{item.name}}</div>
        <div class="Cseach-logic-f border-bottom" v-if="show">没有匹配</div>
      </div>
    </div>
  </div>
</template>

<script>
import Bscroll from 'better-scroll'
export default {
  name: 'Cseach',
  mounted () {
    this.scroll = new Bscroll(this.$refs.nba, { mouseWheel: true, click: true, tap: true })
  },
  computed: {
    show () {
      return !this.list.length
    }
  },
  methods: {
    handClick (city) {
      this.$store.commit('change', city)
      this.$router.push('/')
    }
  },
  props: {
    citys: Object
  },
  data () {
    return {
      keyword: '',
      list: [],
      time: null
    }
  },
  watch: {
    keyword () {
      if (!this.time) {
        clearTimeout(this.time)
      }
      this.time = setTimeout(() => {
        const list = []
        if (!this.keyword) {
          this.list = []
          return
        }
        for (let i in this.citys) {
          this.citys[i].forEach((value) => {
            if (value.spell.indexOf(this.keyword) > -1 || value.name.indexOf(this.keyword) > -1) {
              list.push(value)
            }
          })
        }
        this.list = list
      }, 100)
    }
  }
}
</script>

<style lang="stylus" scoped>
  .Cseach-container
   height: .72rem
   background: #00bcd4
   padding: .1rem
   box-sizing: border-box
   line-height: .52rem
   text-align: center
   .Cseach-input
    width: 100%
    height: 100%
    padding: .1rem
    box-sizing: border-box
    text-align: center
    border-radius: .1rem
  .Cseach-logic
   z-index: 1
   overflow: hidden
   position: absolute
   top: 1.58rem
   left: 0
   right: 0
   bottom: 0
   background: #eeeeee
   .Cseach-logic-f
    width: 100
    line-height: .4rem
    background: #ffffff
</style>
